Iterate on high-fidelity designs 對高保真設計進行迭代最佳化
團隊已完成高保真原型並進行第二輪可用性測試。接下來是根據參與者的反饋在 Figma 中進行設計更新。由於高保真原型的迭代耗時耗力，UX 設計師通常會優先修改靜態 mockup 來解決問題。
Will 提示：可以先不看影片和答案，自己先想想怎麼解決這些問題，然後再對比答案。這樣能鍛鍊你的思考能力。
可用性研究洞察（Insights）
1 使用者很難從日曆中選擇日期。
2 使用者直到預約流程結束才知道每位遛狗員的價格。
更新一：最佳化日期選擇流程
初始設計問題
- 第一次測試中，使用者認為“輸入日期時間”的欄位太難用。
- 更新後使用了滾輪形式的日期選擇器（日期、時間、時長）。
- 但使用者仍不滿意：只能選“月+日”，不能選“星期幾”。
- 這導致使用者不得不另開日曆查詢具體日期。
解決方案
- 改為使用下拉選單配合彈出式完整日曆（可顯示“日/月/星期幾”）。
- 使用 Figma 中事先製作的下拉選單元件替代滾輪：
- 包括 Day（日期）、Time（時間）、Duration（時長）三個下拉框。
- 佈局上，“時間”和“時長”各佔一半寬度，位於“日期”下方。
- 其他元件（如核取方塊、遛狗列表）向下移，確保整體排版合理。
- 使用 Figma 社群現成的日曆元件（如 Felipe 的模板），進行樣式定製（顏色、字型、對齊方式等）以適配 App。
- 點選“Day”欄位後，展開日曆，頁面其餘部分自動下移。
- 驗證原型連結：功能如預期工作。
更新二：展示每位遛狗員的價格資訊
初始問題
使用者在整個預約流程中看不到每位遛狗員的收費標準，直到流程結束才顯示價格。
解決方案
在首頁展示每位遛狗員的資訊時新增價格：
- 將“評分”、“距離”後新增“價格”資訊。
- 使用 Material Design 圖示庫中的“$”圖示，統一樣式。
- 舉例：Sarah 的 30 分鐘價格為 $10，推算小時為 $20。
為每位遛狗員新增不同的價格以便使用者比較。同樣在“瀏覽頁”和“遛狗員資料頁”中也需要加入此資訊（未在影片中展示，但執行方法相同）。
整體更新流程總結
- 將舊頁面移出工作區域。
- 用更新後的頁面替換使用者流程中的舊頁面。
- 重新測試完整使用者流程：
- 進入首頁，點選“預約”。
- 使用更新後的日期選擇功能完成預約。
- 透過新增價格資訊實現更高透明度。
- 新原型已完成，是對上一輪可用性研究反饋的響應。